<template>
  <div class="app-container">
    <el-card shadow="never" class="app_container_header">
      <el-form :model="initData" label-width="90px">
        <el-row :gutter="60">
          <el-col :span="8">
            <el-form-item prop="number" label="线路编号: ">
              <el-input
                v-model="initData.number"
                placeholder="请输入线路编号"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="name" label="线路名称: " label-width="80px">
              <el-input
                v-model="initData.name"
                clearable
                placeholder="请输入线路名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起始机构: " label-width="80px">
              <cy-tree-select
                v-model="valueStart"
                :placeholder="'请选择起始地机构'"
                filterable
                :data="options"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目的地机构:">
              <cy-tree-select
                v-model="valueEnd"
                :placeholder="'请选择目的地机构'"
                filterable
                :data="options"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="0">
              <el-button
                class="app_container_search"
                type="primary"
                @click="searchForm"
              >搜索</el-button>&nbsp;
              <el-button
                class="app_container_rest"
                @click="restForm"
              >重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" class="app_container_body">
      <el-button type="primary" @click="fnNew">新增路线</el-button>&nbsp;
      <el-button type="primary" @click="fnSetCost">成本设置</el-button>
      <el-table
        v-loading="listLoading"
        stripe
        style="width: 100%"
        :data="list"
        :expand-row-keys="expands"
        :row-key="getRowKeys"
        :header-cell-style="{ background: '#f8faff' }"
        @expand-change="expandChangeHandler"
      >
        <el-table-column width="48" type="expand">
          <template v-slot="">
            <el-table
              v-loading="loading"
              :data="LineList"
              stripe
              :header-cell-style="{ background: '#f8faff' }"
            >
              <el-table-column prop="name" width="197" label="车次名称" />
              <el-table-column
                prop="departureTime"
                width="197"
                label="发车频次"
              >
                <template v-slot="{ row }">
                  <span>
                    {{ formatData(row?.departureTime) + "/" + row?.periodName }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="arriveTime" width="197" label="到达时间">
                <template v-slot="{ row }">
                  <span>{{ formatData(row?.arriveTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column width="197" label="车辆安排">
                <template v-slot="{ row }">
                  <span>
                    {{
                      row.truckDrivers &&
                      row.truckDrivers[0]?.truck.licensePlate
                    }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column width="197" label="司机安排">
                <template v-slot="{ row }">
                  <span>
                    {{
                      row.truckDrivers
                        ?.map((item) => item.driver.name)
                        .join(",")
                    }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template v-slot="{ row }">
                  <el-button
                    type="text"
                    style="color: #419eff"
                    @click="getTrainDetail(row.id)"
                  >编辑车次</el-button>
                  <span class="margin_one">|</span>
                  <el-button
                    type="text"
                    @click="deleteTrain(row.id)"
                  >删除车次</el-button>
                  <span class="margin_one" style="color: #dcdfe6">|</span>
                  <el-button
                    type="text"
                    style="color: #419eff"
                    @click="getVehicleList(row)"
                  >安排车辆</el-button>
                  <span class="margin_one">|</span>
                  <el-button
                    type="text"
                    @click="unbindVehicle(row)"
                  >车辆解绑</el-button>
                </template>
              </el-table-column>
              <template slot="empty">
                <el-empty
                  image="https://fe-slwl-manager.itheima.net/static/img/pic-kong.742d3899.png"
                  description="这里空空如也"
                />
              </template>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="number" width="170" label="线路编号" />
        <el-table-column prop="name" width="170" label="线路名称" />
        <el-table-column prop="type" width="170" label="线路类型">
          <template v-slot="{ row }">
            <span>{{
              row.type === 1 ? "干线" : row.type === 2 ? "支线" : "接驳路线"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="startOrganName" width="130" label="起始地机构" />
        <el-table-column prop="endOrganName" width="130" label="目的地机构" />
        <el-table-column prop="distance" width="120" label="距离 (千米)" />
        <el-table-column prop="cost" width="130" label="成本 (元)" />
        <el-table-column prop="time" width="140" label="预计时间 (分钟)" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              type="text"
              style="color: #419eff"
              @click="fnRevise('编辑线路', row.id)"
            >修改</el-button>
            <span class="margin_one">|</span>
            <el-button type="text" @click="fnDel(row.id)">删除</el-button>
            <span class="margin_one">|</span>
            <el-button
              type="text"
              style="color: #419eff"
              @click="fnAddTrips(row)"
            >增加车次</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="initData.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size.sync="initData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <Footer />
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :class="{
        addTrips: title === '新增车次',
        getVehicleList: title === '安排车辆',
      }"
      width="35%"
      @close="fnCancel"
    >
      <el-form
        v-if="title === '新增线路' || title === '编辑线路'"
        ref="dialogForm"
        v-loading="dialogLoading"
        :model="dialogForm"
        :rules="rules"
        label-width="110px"
      >
        <el-form-item prop="number" label="线路编号:">
          <el-input
            v-model="dialogForm.number"
            maxlength="8"
            placeholder="请输入线路名称"
          />
        </el-form-item>
        <el-form-item prop="name" label="线路名称:">
          <el-input v-model="dialogForm.name" placeholder="请输入线路名称" />
        </el-form-item>
        <el-form-item
          hide-required-asterisk="true"
          prop="type"
          label="线路类型:"
        >
          <el-select
            v-model="dialogForm.type"
            :disabled="!!dialogForm.id"
            clearable
            placeholder="请选择线路类型"
            style="width: 100%"
          >
            <el-option label="干线" :value="1" />
            <el-option label="支线" :value="2" />
            <el-option label="接驳路线" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item prop="startOrganId" label="起始地机构:">
          <cy-tree-select
            ref="dialogFormStartTree"
            v-model="dialogForm.startOrganId"
            :disabled="!!dialogForm.id"
            :placeholder="'请选择起始地机构'"
            filterable
            :data="options"
          />
        </el-form-item>
        <el-form-item prop="endOrganId" label="目的地机构:">
          <cy-tree-select
            ref="dialogFormEndTree"
            v-model="dialogForm.endOrganId"
            :disabled="!!dialogForm.id"
            :placeholder="'请选择目的地机构'"
            filterable
            :data="options"
          />
        </el-form-item>
        <el-form-item v-if="title === '编辑线路'" prop="distance" label="距离">
          <el-input v-model="dialogForm.distance" placeholder="请输入距离">
            <span
              slot="suffix"
              style="
                color: rgb(32, 35, 42);
                margin-right: 14px;
                font-size: 14px;
              "
            >千米</span>
          </el-input>
        </el-form-item>
        <el-form-item v-if="title === '编辑线路'" prop="cost" label="成本">
          <el-input v-model="dialogForm.cost" placeholder="请输入成本">
            <span
              slot="suffix"
              style="
                color: rgb(32, 35, 42);
                margin-right: 14px;
                font-size: 14px;
              "
            >元</span>
          </el-input>
        </el-form-item>
      </el-form>
      <div v-if="title === '成本设置'">
        <el-form
          ref="dialogCostForm1"
          label-width="110px"
          :model="dialogCostList[0]"
          :rules="rules1"
        >
          <el-form-item label="线路类型">
            <span>每公里平均成本（元）</span>
          </el-form-item>
          <el-form-item label="干线:" prop="cost">
            <el-input v-model="dialogCostList[0].cost" placeholder="请输入" />
          </el-form-item>
        </el-form>
        <el-form
          ref="dialogCostForm2"
          label-width="110px"
          :model="dialogCostList[1]"
          :rules="rules2"
        >
          <el-form-item label="支线:" prop="cost">
            <el-input v-model="dialogCostList[1].cost" placeholder="请输入" />
          </el-form-item>
        </el-form>
        <el-form
          ref="dialogCostForm3"
          label-width="110px"
          :model="dialogCostList[0]"
          :rules="rules3"
        >
          <el-form-item label="接驳:" prop="cost">
            <el-input v-model="dialogCostList[2].cost" placeholder="请输入" />
          </el-form-item>
        </el-form>
      </div>
      <div v-if="title === '新增车次' || title === '编辑车次'" v-loading="dialogLoading">
        <el-form
          ref="addTripsData"
          :model="addTripsData"
          :rules="addTripsDataRules"
          label-width="120px"
        >
          <el-form-item label="线路名称:">
            <el-input v-model="dialogForm.name" disabled />
          </el-form-item>
          <el-form-item label="车次名称:" prop="name">
            <el-input v-model="addTripsData.name" placeholder="请输入车次名称" />
          </el-form-item>
          <el-form-item label="发车时间:" prop="departureTime">
            <el-time-picker
              v-model="addTripsData.departureTime"
              format="HH:mm"
              placeholder="请选择发车时间"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="持续时间:" prop="estimatedTime">
            <el-input
              v-model="addTripsData.estimatedTime"
              placeholder="请输入持续时间"
            >
              <span
                slot="suffix"
                style="
                color: rgb(32, 35, 42);
                margin-right: 14px;
                font-size: 14px;
              "
              >分钟</span>
            </el-input>
          </el-form-item>
          <el-form-item label="发车周期:" prop="period">
            <el-select
              ref="addTripsDataPeriod"
              v-model="addTripsData.period"
              clearable
              placeholder="请选择周期"
              style="width: 100%"
            >
              <el-option label="天" :value="1" />
              <el-option label="周" :value="2" />
              <el-option label="月" :value="3" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="title === '安排车辆'">
        <el-form label-width="100px">
          <el-form-item label="线路名称:">
            <el-input v-model="dialogForm.name" disabled />
          </el-form-item>
          <el-form-item label="车次名称:">
            <el-input v-model="addTripsData.name" disabled />
          </el-form-item>
          <el-form-item label="开车时间:">
            <el-input v-model="addTripsData.departureTime" disabled />
          </el-form-item>
          <el-form-item label="车辆安排:">
            <el-select
              v-model="truckId"
              clearable
              filterable
              placeholder="请输入车牌号"
              style="width: 100%"
            >
              <el-option
                v-for="item in VehicleList"
                :key="item.id"
                :label="item.licensePlate"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="fnOK">确 定</el-button>&nbsp;
        <el-button style="margin-left: 15px" @click="fnCancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDepartTree } from '@/api/base'
import {
  getLineList,
  getCarList,
  addLine,
  deleteLine,
  updateLine,
  getLineDetail,
  getCostConfig,
  saveCostConfig,
  addTrain,
  deleteTrain,
  unbindVehicle,
  getTrainDetail,
  updateTrain,
  getVehicleList
} from '@/api/transport'
export default {
  name: 'Transport',
  data() {
    return {
      options: [], // 部门树
      valueStart: '',
      valueEnd: '',
      initData: {
        // 初始化数据
        number: null,
        name: null,
        page: 1,
        pageSize: 10,
        endOrganId: null,
        startOrganId: null
      }, // 初始化数据
      list: [], // 列表数据
      LineList: [], // 线路详情
      total: 0, // 总条数
      listLoading: false, // 是否加载
      getRowKeys(row) {
        // 获取行数据的 key
        return row.id
      },
      expands: [], // 展开行
      truckDrivers: [],
      transportLine: {},
      loading: false,
      dialogVisible: false,
      title: '新增线路',
      dialogForm: {
        cost: '',
        distance: '',
        endOrganId: '',
        name: '',
        number: 'XL',
        startOrganId: '',
        type: null
      },
      rules: {
        name: [{ required: true, message: '请输入线路名称', trigger: 'blur' }],
        number: [
          { required: true, message: '请输入线路编号', trigger: 'blur' },
          {
            pattern: /^XL\d{6}$/,
            message: '线路编号前两位为XL，后6位位数字，请重新输入',
            trigger: 'blur'
          }
        ],
        type: [
          { required: true, message: '请选择线路类型', trigger: 'change' }
        ],
        startOrganId: [
          { required: true, message: '起始地机构不能为空', trigger: 'change' }
        ],
        endOrganId: [
          { required: true, message: '目的地机构不能为空', trigger: 'change' }
        ],
        cost: [
          { required: true, message: '成本不能为空', trigger: 'blur' },
          {
            pattern: /^[0-9]+(.[0-9]{1,2})?$/,
            message: '只能输入数字类型，最多保留两位小数，请重新输入',
            trigger: 'blur'
          }
        ],
        distance: [
          { required: true, message: '距离不能为空', trigger: 'blur' },
          {
            pattern: /^[0-9]+(.[0-9]{1,2})?$/,
            message: '只能输入数字类型，最多保留两位小数，请重新输入',
            trigger: 'blur'
          }
        ]
      },
      dialogCostList: [],
      rules1: {
        cost: [
          { required: true, message: '干线不能为空', trigger: 'blur' },
          {
            pattern: /^[0-9]+(.[0-9]{1,2})?$/,
            message: '只能输入数字类型，最多保留两位小数，请重新输入',
            trigger: 'blur'
          }
        ]
      },
      rules2: {
        cost: [
          { required: true, message: '支线不能为空', trigger: 'blur' },
          {
            pattern: /^[0-9]+(.[0-9]{1,2})?$/,
            message: '只能输入数字类型，最多保留两位小数，请重新输入',
            trigger: 'blur'
          }
        ]
      },
      rules3: {
        cost: [
          { required: true, message: '接驳不能为空', trigger: 'blur' },
          {
            pattern: /^[0-9]+(.[0-9]{1,2})?$/,
            message: '只能输入数字类型，最多保留两位小数，请重新输入',
            trigger: 'blur'
          }
        ]
      },
      addTripsData: {
        departureTime: null,
        estimatedTime: null,
        name: '',
        period: null,
        periodName: '',
        transportLineId: null
      },
      addTripsDataRules: {
        departureTime: [
          { required: true, message: '发车时间不能为空', trigger: 'blur' }
        ],
        estimatedTime: [
          { required: true, message: '持续时间不能为空', trigger: 'blur' }
        ],
        name: [{ required: true, message: '车次不能为空', trigger: 'blur' }],
        period: [{ required: true, message: '周期不能为空', trigger: 'blur' }]
      },
      transportLineId: null,
      VehicleList: [],
      truckId: '',
      transportTripsId: '',
      dialogLoading: false
    }
  },
  created() {
    this.getTree()
    this.initList()
    this.getCostConfig()
  },
  methods: {
    // 获取机构树
    async getTree() {
      const res = await getDepartTree()
      this.options = JSON.parse(res)
    },
    // 初始化列表
    async initList() {
      this.listLoading = true
      const res = await getLineList(this.initData)
      this.list = res.items
      this.total = +res.counts
      this.listLoading = false
    },
    // 获取初始化成本
    async getCostConfig() {
      const res = await getCostConfig()
      this.dialogCostList = res
    },
    handleCurrentChange(val) {
      this.initData.page = val
      this.initList()
    },
    handleSizeChange(val) {
      this.initData.pageSize = val
      this.initList()
    },
    // 搜索逻辑
    async searchForm() {
      this.initData.page = 1
      this.initData.startOrganId = this.valueStart
      this.initData.endOrganId = this.valueEnd
      this.initList()
    },
    // 重置
    restForm() {
      this.valueStart = ''
      this.valueEnd = ''
      this.initData = {
        number: null,
        name: null,
        page: 1,
        pageSize: 10,
        endOrganId: null,
        startOrganId: null
      }
      this.initList()
    },
    // 获取线路详情
    async getCarList(id) {
      this.loading = true
      const data = {
        transportLineId: id
      }
      const res = await getCarList(data)
      this.LineList = res
      this.loading = false
    },
    // 展开行时的逻辑
    async expandChangeHandler(row, expandedRows) {
      this.LineList = []
      this.truckDrivers = []
      this.transportLine = {}
      if (expandedRows.length) {
        this.expands = []
        this.transportLineId = row.id
        if (row) {
          this.expands.push(row.id)
        }
      } else {
        this.transportLineId = null
        this.expands = []
      }
      if (expandedRows.length) {
        this.getCarList(row.id)
      }
    },
    // 格式化数据
    formatData(data) {
      const h = parseInt(data / 60)
      const m = data % 60 < 10 ? '0' + (data % 60) : data % 60
      return h + ':' + m
    },
    // 删除线路
    async fnDel(id) {
      await this.$confirm('确认删除吗?')
      await deleteLine(id)
      this.$message.success('删除成功')
      this.initList()
    },
    // 弹框取消逻辑
    fnCancel() {
      this.dialogVisible = false
      this.$refs.dialogForm?.resetFields()
      this.$refs.dialogCostForm1?.resetFields()
      this.$refs.dialogCostForm2?.resetFields()
      this.$refs.dialogCostForm3?.resetFields()
      this.$refs.addTripsData?.resetFields()
      this.dialogForm = {
        cost: '',
        distance: '',
        endOrganId: '',
        name: '',
        number: 'XL',
        startOrganId: '',
        type: null
      }
      this.getCostConfig()
      this.addTripsData = {
        departureTime: null,
        estimatedTime: null,
        name: '',
        period: null,
        periodName: '',
        transportLineId: null
      }
      this.VehicleList = []
    },
    // 新增线路
    fnNew() {
      this.title = '新增线路'
      this.dialogVisible = true
    },
    // 成本设置
    fnSetCost() {
      this.title = '成本设置'
      this.dialogVisible = true
    },
    // 修改线路
    async fnRevise(title, id) {
      this.title = title
      this.dialogVisible = true
      this.dialogLoading = true
      const res = await getLineDetail(id)
      this.dialogForm = res
      this.dialogLoading = false
    },
    // 增加车次
    fnAddTrips(row) {
      this.title = '新增车次'
      this.dialogForm.name = row.name
      this.addTripsData.transportLineId = row.id
      this.dialogVisible = true
    },
    // 删除车次
    async deleteTrain(id) {
      await this.$confirm('确认删除吗?')
      await deleteTrain(id)
      this.$message.success('删除成功')
      this.getCarList(this.transportLineId)
    },
    // 车辆解绑
    async unbindVehicle(row) {
      if (row.truckDrivers) {
        await unbindVehicle({ transportTripsId: row.id })
        this.$message.success('解绑成功')
        this.getCarList(this.transportLineId)
      } else {
        this.$alert('此车次下无绑定车辆，无法解绑！', '解绑失败', {
          confirmButtonText: '确定'
        })
      }
    },
    // 编辑车次
    async getTrainDetail(id) {
      this.title = '编辑车次'
      this.dialogVisible = true
      this.dialogLoading = true
      const res = await getTrainDetail(id)
      this.addTripsData = res
      this.addTripsData.departureTime = new Date(
        0,
        0,
        0,
        parseInt(res.departureTime / 60),
        res.departureTime % 60
      )
      this.dialogForm.name = res.transportLine.name
      this.dialogLoading = false
    },
    // 安排车辆
    async getVehicleList(row) {
      this.title = '安排车辆'
      this.dialogForm.name = row.transportLine.name
      this.addTripsData.name = row.name
      this.transportTripsId = row.id
      this.addTripsData.departureTime =
        parseInt(row.departureTime / 60) + ':' + (row.departureTime % 60)
      this.dialogVisible = true
      const res = await getVehicleList({
        endOrganId: row.transportLine.endOrganId,
        startOrganId: row.transportLine.startOrganId
      })
      this.VehicleList = res
    },
    // 弹框确认
    async fnOK() {
      let flag = false
      await this.$refs.dialogForm?.validate(async(valid) => {
        if (!valid) {
          this.$message.error('请按照提示填写!')
        } else {
          flag = true
        }
      })
      await this.$refs.dialogCostForm1?.validate(async(valid) => {
        if (!valid) {
          flag = false
        } else {
          flag = true
        }
      })
      await this.$refs.dialogCostForm2?.validate(async(valid) => {
        if (!valid) {
          flag = false
        } else {
          flag = true
        }
      })
      await this.$refs.dialogCostForm2?.validate(async(valid) => {
        if (!valid) {
          flag = false
        } else {
          flag = true
        }
      })
      await this.$refs.addTripsData?.validate(async(valid) => {
        if (!valid) {
          this.$message.error('请按照提示填写!')
        } else {
          flag = true
        }
      })
      if (flag) {
        if (this.title === '新增线路') {
          this.dialogForm.startOrganName = await this.$refs.dialogFormStartTree
            .$data.optionData.name
          this.dialogForm.endOrganName = await this.$refs.dialogFormEndTree
            .$data.optionData.name
          await addLine(this.dialogForm)
          this.$message.success('新增成功!')
        } else if (this.title === '编辑线路') {
          await updateLine(this.dialogForm)
          this.$message.success('修改成功!')
        } else if (this.title === '成本设置') {
          await saveCostConfig(this.dialogCostList)
          this.$message.success('成本修改成功!')
          this.getCostConfig()
        } else if (this.title === '新增车次') {
          this.addTripsData.departureTime =
            this.addTripsData.departureTime.getHours() * 60 +
            this.addTripsData.departureTime.getMinutes()
          this.addTripsData.periodName = await this.$refs.addTripsDataPeriod
            .$data.selectedLabel
          await addTrain(this.addTripsData)
          this.$message.success('新增车次成功!')
          this.getCarList(this.transportLineId)
          // this.fnCancel()
          // this.initList()
          // return
        } else if (this.title === '编辑车次') {
          this.addTripsData.departureTime =
            this.addTripsData.departureTime.getHours() * 60 +
            this.addTripsData.departureTime.getMinutes()
          this.addTripsData.periodName = await this.$refs.addTripsDataPeriod
            .$data.selectedLabel
          await updateTrain(this.addTripsData)
          this.$message.success('修改车次成功!')
          this.getCarList(this.transportLineId)
          // this.fnCancel()
          // this.initList()
          // return
        }
        this.fnCancel()
        this.initList()
      }
      if (this.title === '安排车辆') {
        await unbindVehicle({
          transportTripsId: this.transportTripsId,
          truckIds: [this.truckId]
        })
        this.$message.success('车辆安排成功!')
        this.getCarList(this.transportLineId)
        this.fnCancel()
        this.initList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  padding-bottom: 0;
  .app_container_header {
    width: 100%;
    ::v-deep .el-card__body {
      padding-left: 0;
      .el-row {
        margin: 0 !important;
        .el-col {
          height: 40px;
          margin-bottom: 20px;
          &:last-child {
            margin-bottom: 0;
          }
          .el-form-item__label {
            font-weight: normal;
          }
          .el-select {
            width: 100%;
          }
          .el-button {
            width: 90px;
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            padding: 10px 20px !important;
            border-radius: 5px !important;
            font-weight: 400;
          }
          .app_container_search {
            height: 40px;
          }
          .app_container_rest {
            margin-left: 12px;
          }
        }
      }
    }
  }
  .app_container_body {
    margin-top: 20px;
    padding: 28px;
    padding-bottom: 0;
    :deep(.el-card__body) {
      padding: 0;
    }
    .el-table {
      border: 1px solid #ebeef5;
    }
    .el-button {
      margin-bottom: 20px;
    }
    ::v-deep .el-table__header {
      .el-table_1_column_16 {
        .cell {
          text-align: center;
        }
      }
    }
    ::v-deep .el-table__body {
      font-size: 13px;
      .el-table__cell {
        .cell {
          padding-right: 0;
        }
        .el-table--enable-row-hover {
          width: 94%;
          margin: 0 auto 8px;
          .el-table__cell {
            text-align: center;
          }
          .el-table__body-wrapper {
            .el-table__cell {
              font-size: 13px;
              color: #20232a;
              .el-button {
                font-size: 12px;
              }
            }
          }
        }
        .el-button {
          margin: 0;
          padding: 0;
        }
      }
    }
    :deep(.el-empty) {
      padding-bottom: 0;
      .el-empty__description {
        margin-top: 0;
        p {
          font-weight: 400;
          color: #818693;
          font-size: 16px;
        }
      }
    }
    .el-pagination {
      text-align: center;
      margin-top: 20px;
      padding: 0 0 40px;
    }
    .margin_one {
      margin: 0 8px;
      color: #dedfe6;
    }
  }
  :deep(.el-dialog) {
    border-radius: 8px;
  }
  :deep(.el-dialog__header) {
    padding: 15px 30px;
    border-radius: 8px 8px 0 0;
    background-color: #f3f4f7;
    .el-dialog__headerbtn {
      right: 30px;
    }
  }
  :deep(.el-dialog__body) {
    padding: 40px 66px 0 50px !important;
    .el-form-item__label {
      font-weight: 400;
      color: #20232a;
    }
    .el-input.is-disabled .el-input__inner {
      border: 1px solid #d8dde3;
      border-radius: 5px;
      color: #20232a;
    }
  }
  :deep(.el-dialog__footer) {
    padding: 14px 30px 38px !important;
    .dialog-footer {
      display: block;
      text-align: center;
      .el-button {
        width: 90px;
      }
    }
  }
  .addTrips {
    :deep(.el-dialog__body) {
      padding: 40px 40px 0 10px !important;
    }
  }
  .getVehicleList {
    :deep(.el-dialog__body) {
      padding: 20px 20px 0 0px !important;
    }
  }
}
</style>
